<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@taglib uri="/struts-tags" prefix="s"%>
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery.form.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.18.custom.min.js"></script>
<link type="text/css"
	href="css/ui-lightness/jquery-ui-1.8.18.custom.css" rel="stylesheet" />
<link type="text/css" href="css/tabs.css" rel="stylesheet" />
<style type="text/css">
#wrapper {
	width: 100%;
}

ul.tabs {
	width: 100%;
	margin: 0;
	padding: 0;
}

ul.tabs li {
	display: block;
	float: left;
	padding: 0 5px;
}

ul.tabs li a {
	display: block;
	float: left;
	padding: 5px;
	font-size: 0.8em;
	background-color: #e0e0e0;
	color: #666;
	text-decoration: none;
}

.selected {
	font-weight: bold;
}

.tab-content {
	clear: both;
	border: 1px solid #ddd;
	padding: 10px;
}
</style>
<script type="text/javascript">
	(function() {

		var bar = $('.bar');
		var percent = $('.percent');
		var status = $('#status');

		$('form').ajaxForm({
			beforeSend : function() {
				alert("Before send");
				status.empty();
				status.html('<p> Sending data to server </p>');
				/*var percentVal = '0%';
				bar.width(percentVal)
				percent.html(percentVal); */
			},
			/*uploadProgress : function(event, position, total, percentComplete) {
				var percentVal = percentComplete + '%';
				bar.width(percentVal)
				percent.html(percentVal);
			}, */
			complete : function(xhr) {
				//alert("complete");
				status.html(xhr.responseText);
			}
		});

		// $("#tabs").tabs();
		$('.tabs a').click(function() {
			switch_tabs($(this));
			return false;
		});

		switch_tabs($('.defaulttab'));

	})();

	function switch_tabs(obj) {
		$('.tab-content').hide();
		$('.tabs a').removeClass("selected");
		var id = obj.attr("rel");
		var link = obj.attr("href");
		//alert(link);
		
		$('#' + id).load(link);
		$('#' + id).show();
		obj.addClass("selected");
	}
</script>

<div id="wrapper">
	<ul class="tabs">
		<li><a href="/index.jsp" class="defaulttab" rel="tabs1">Configure New
				EPPD</a>
		</li>
		<li><a href="/functional" rel="tabs2">Edit EPPD Settings</a>
		</li>
		<li><a href="/epp_server_settings" rel="tabs3">Connection Settings</a>
		</li>
	</ul>

	<div class="tab-content" id="tabs1">
		<div id="settingstab" class="wrap">
			<s:form action="epp_server_settings" name="epp_server_settings"
				method="POST" enctype="multipart/form-data">
				<s:textfield label="EPPD Friendly Name" name="eppdFriendlyname"
					maxlength="15"></s:textfield>
				<s:textfield label="EPPD Ip address" name="ipAddress" maxlength="15"></s:textfield>
				<s:textfield label="EPPD Port Number" name="portNumber"
					maxlength="4"></s:textfield>
				<s:textfield label="Username" name="username" maxlength="10"></s:textfield>
				<s:password label="Password" name="password" maxlength="10"
					required="true"></s:password>
				<s:file label="X.509 Certificate PCKS2" name="pcksFile"></s:file>
				<s:file label="X.509 Certificate JKS- A" name="jksFile"></s:file>
				<button>Save Settings</button>
			</s:form>

			<div id="results"></div>
			<div id="status"></div>

		</div>
	</div>
	<div class="tab-content" id="tabs2">
	</div>
	<div class="tab-content" id="tabs3">
	<div id="settingstab" class="wrap">
			<s:form action="epp_server_settings" name="epp_server_settings"
				method="POST" enctype="multipart/form-data">
				<s:textfield label="EPPD Friendly Name" name="eppdFriendlyname"
					maxlength="15"></s:textfield>
				<s:textfield label="EPPD Ip address" name="ipAddress" maxlength="15"></s:textfield>
				<s:textfield label="EPPD Port Number" name="portNumber"
					maxlength="4"></s:textfield>
				<s:textfield label="Username" name="username" maxlength="10"></s:textfield>
				<s:password label="Password" name="password" maxlength="10"
					required="true"></s:password>
				<s:file label="X.509 Certificate PCKS2" name="pcksFile"></s:file>
				<s:file label="X.509 Certificate JKS- A" name="jksFile"></s:file>
				<button>Save Settings</button>
			</s:form>

			<div id="results"></div>
			<div id="status"></div>
	</div>
</div>



